
/*
 * @Autor: Mr Lu
 * @Version: 1.0
 * @Date: 2019-12-03
 * @LastEditors: OBKoro1
 * @LastEditTime: 2019-12-03
 * @Description:  质量工匠之星首页
 */
<template>
  <div id="CraftsmanStar" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>质量工匠之星
      </mu-appbar>
      <div class="header-sub" @click="goIntegration">
        <span>我的积分</span>
        <span class="fenshu">
          {{totalCount}}
          <i class="iconfont iconangle-right"></i>
        </span>
      </div>
    </div>
    <!-- <div class="p-header shadow">
      <WeatherModule></WeatherModule>
    </div>-->
    <div class="p-content">
      <!-- <wallModule name="我的积分" :total="totalCount" :bgImage="wallBgImage">
        <span class="total" slot="total" style="color:#0080CB">{{totalCount}}</span>
      </wallModule>-->
      <div class="m-box" v-for="(menu) in menuList" :key="menu.id" >
        <div class="m-title">{{menu.moduleName}}</div>
        <div class="m-content">
          <div class="menu-list">
            <div
              class="menu-item"
              v-for="(mod) in menu.moduleList"
              :key="mod.id"
              @click="skipPage(mod)"
              v-power="mod.power"
            >
              <img :src="mod.src" alt />
              <span>{{mod.name}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WeatherModule from "@/weather/WeatherModule";
import wallModule from "@/wall/wallModule";
import ImgPreview from "@/preview/ImgPreview.vue";
export default {
  name: "CraftsmanStar",
  components: {
    WeatherModule,
    wallModule
  },
  data() {
    return {
      totalCount: 0,
      wallBgImage: require("#/assets/img/wall/wall.png"),
      menuList: [
        {
          id: "1",
          moduleName: "工作",
          moduleList: [
            {
              id: "1-1",
              name: "行为观察",
              src: require("#/assets/img/starHome/watch.png"),
              path: "Observations",
              power:"starActive"
            },
            {
              id: "1-2",
              name: "问题上报",
              src: require("#/assets/img/starHome/upReport.png"),
              path: "IssueReport",
              power:"starQues"
            }
          ]
        },
        {
          id: "2",
          moduleName: "待办",
          moduleList: [
            {
              id: "2-1",
              name: "我提交的",
              src: require("#/assets/img/starHome/submitOfMine.png"),
              path: "Submitted",
              query: {
                type: "submitted"
              },
              power:"starMySave"
            },
            {
              id: "2-2",
              name: "审批工作",
              src: require("#/assets/img/starHome/jobOfApproval.png"),
              path: "Approve",
              query: {
                type: "approve"
              },
              power:"starApproval"
            }
          ]
        },
        {
          id: "3",
          moduleName: "台账",
          moduleList: [
            {
              id: "3-1",
              name: "行为观察台账",
              src: require("#/assets/img/starHome/watchLedger.png"),
              path: "ObservationsLedger",
              query: {
                type: "submittedLedger"
              },
              power:"starActiveParamter"
            },
            {
              id: "3-2",
              name: "问题上报台账",
              src: require("#/assets/img/starHome/upReportLedger.png"),
              path: "IssueReportLedger",
              query: {
                type: "approveLedger"
              },
              power:"starQuesParamter"
            }
          ]
        },
        {
          id: "4",
          moduleName: "分析",
          moduleList: [
            {
              id: "4-1",
              name: "积分排行榜",
              src: require("#/assets/img/starHome/rankingList.png"),
              path: "Ranking",
              power:"starScoreSql"
            },
            {
              id: "4-2",
              name: "数据分析",
              src: require("#/assets/img/starHome/dataAnal.png"),
              path: "DataAnalyze",
              power:"starDataAnl"
            }
          ]
        },
        {
          id: "5",
          moduleName: "商家",
          moduleList: [
            {
              id: "4-1",
              name: "积分兑换",
              src: require("#/assets/img/starHome/exchange.png"),
              path: "Exchange",
              power:"starChange"
            }
          ]
        }
      ]
    };
  },
  computed: {},
  created() {
    this.initTotal();
    this.$nextTick(()=>{
      this.handemptyDOM('m-box','menu-item');
    })
  },
  mounted() {},
  watch: {},
  methods: {
    handemptyDOM(box,testDom){
      let el = document.getElementsByClassName(box)
      if(el.length){
        for(let i=0;i<el.length;i++){
          let str = el[i].innerHTML+'';
          if(str.indexOf(testDom) === -1){
            el[i].style.display = "none"; 
          }
        }
      }
    },
    initTotal() {
      this.$A
        .Go("get", "/safety/userScore/myScore", {
          userId: this.$A.GS("userInfo")["userId"]
        })
        .then(res => {
          this.$closeLoading();
          if (res.code == 200) {
            if (res.body && res.body.totalScore) {
              this.totalCount = res.body.totalScore;
            } else {
              this.totalCount = 0;
            }
          } else {
            this.totalCount = 0;
          }
        });
    },
    skipPage(item) {
      this.$router.push({
        name: item.path,
        query: item.query
      });
    },
    goIntegration() {
      this.$router.push({
        name: "Integration"
      });
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
#CraftsmanStar {
  .header-sub {
    background: #fff;
    padding: 0.06rem 0.14rem;
    padding-bottom: 0.15rem;
    font-size: 0.15rem;
    // text-align: right;
    .fenshu {
      font-size: 0.21rem;
      font-weight: bold;
      color: rgba(0, 128, 203, 1);
      margin: 0 0.03rem;
      i {
        font-size: 0.12rem;
      }
    }
  }
}
</style>
